<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 500px;
				font-size: 50px;
				text-align: center;
				line-height: 500px;
				color: black;
				animation:change 2s infinite linear;
				border: 5px solid palevioletred;
			}
			/* 动画:
			step1:创建关键帧 */
		/* 	@keyframes 动画名称{
				from{}开始帧
				to{}结束帧
			} */
			/* step2:绑定动画
			animation :动画名称  持续时间  次数	速度	延迟
			infinite：无限次*/
			@keyframes change{
/* 时间节点 */	20%,40%{		/* 某种状态持续一段时间 */
					transform: rotate(0);
					background-color: orange;
				}
				40%,60%{			
					width: 500px;
					transform: rotate(180deg);
					background-color: aqua;
				}
				60%,80%{			
					width: 800px;
					transform: rotate(270deg);
					background-color: yellow;
				}
				80%,100%{			
					width: 300px;
					height: 500px;
					transform: rotate(360deg);
					background-color: greenyellow;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">你好世界！</div>
	</body>
</html>
